<template>
  <div class="login">
    <!-- 头部 -->
    <header>
        <van-nav-bar
        title="嗨购登录" @click-left="$router.back()">
        <template #left>
            <van-icon name="arrow-left" size="25" color="black" />
        </template>
    </van-nav-bar>
    </header>
    <!-- 中间 -->
    <main>
        <van-cell-group border>
            <van-field v-model="tel" label="手机号" placeholder="请输入手机号..." autofocus />
        </van-cell-group>
        <van-cell-group border>
            <van-field v-model="password" :type="flag?'password':'text'" label="密码" placeholder="请输入密码..." clearable :right-icon="flag?'closed-eye':'eye-o'" @click-right-icon="flag=!flag"/>
        </van-cell-group>
        <div class="loginBtn">
            <van-button type="danger" round block @click="login">登录</van-button>
            <router-link to="/register">去注册</router-link>
        </div>
    </main>
  </div>
</template>

<script>
import Vue from 'vue';
import { Field, Cell, CellGroup,Button  } from 'vant';
import { doLogin } from "../api/user";
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Field);
Vue.use(Button);
import { Toast } from 'vant';
Vue.use(Toast);
export default {
    data () {
        return {
            tel:'',
            password:'',
            flag:true
        }
    },
    methods:{
        login() {
            doLogin({ loginname: this.tel, password: this.password }).then((res) => {
                console.log(res);
                switch (res.data.code) {
                case "10010":
                    Toast("用户不存在");
                    break;

                case "10011":
                    Toast("密码错误");
                    break;

                case "200":
                    localStorage.setItem("token", res.data.data.token);
                    localStorage.setItem("userid", res.data.data.userid);
                    this.$router.push("/home");
                    break;

                default:
                    break;
                }
            });
        },
    }
}
</script>

<style scoped>
.loginBtn{
    width: 80%;
    margin: .2rem auto;
}
</style>